import Vue from 'vue'

export default () => {
  Vue.directive('watermark', {
    bind(el, binding) {
      function addWaterMarker(imageSrc, parentNode, opacity) {
        const img = new Image() // 创建图片元素
        img.onload = function() {
          const canvas = document.createElement('canvas') // 创建canvas元素
          parentNode.appendChild(canvas) // 这里实际上不会显示canvas，只是用它来生成水印图片
          canvas.width = img.width // 假设水印图片和原图片尺寸相同，或者根据需要设置
          canvas.height = img.height
          canvas.style.display = 'none' // 隐藏canvas

          const ctx = canvas.getContext('2d') // 获取canvas画布

          // 设置透明度
          ctx.globalAlpha = opacity

          // 绘制水印图片
          ctx.translate(canvas.width / 2, canvas.height / 2)
          ctx.rotate(-20 * Math.PI / 180)
          ctx.drawImage(img, -canvas.width / 2 + 50, -canvas.height / 2, canvas.width - 1040, canvas.height - 450)
          ctx.drawImage(img, -canvas.width / 2 + 550, -canvas.height / 2 + 310, canvas.width - 1040, canvas.height - 450)
          ctx.drawImage(img, -canvas.width / 2 + 1050, -canvas.height / 2 + 620, canvas.width - 1040, canvas.height - 450)

          // 可选：旋转水印图片（这里以不旋转为例，如果需要旋转，可以添加旋转逻辑）
          // ctx.save()
          // ctx.rotate(-20 * Math.PI / 180) // 逆时针旋转20度
          // ctx.drawImage(img, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height) // 调整drawImage的参数以适应旋转
          // ctx.restore()

          // 将canvas转换为数据URL，并设置为元素的背景图像
          parentNode.style.backgroundImage = 'url(' + canvas.toDataURL('image/png') + ')'
          parentNode.style.backgroundSize = 'contain' // 根据需要调整背景图像大小
          parentNode.style.backgroundRepeat = 'repeat' // 防止背景图像平铺
          parentNode.style.backgroundPosition = 'center center' // 根据需要调整背景图像位置

          // 清理：虽然在这个例子中canvas不会被再次使用，但清理是一个好习惯
          canvas.parentNode.removeChild(canvas)
        }
        const imageSrc1 = require('../assets/img/watermark.png')
        img.src = imageSrc1 // 设置图片源
      }

      // 从binding中获取水印图片URL和其他参数
      const { imageSrc, opacity = 0.1 } = binding.value
      addWaterMarker(imageSrc, el, opacity)
    }
    // 如果需要，可以在update钩子中更新水印（例如，当绑定的值变化时）
    // update(el, binding) {
    //   // 更新逻辑...
    // },
    // 如果需要，可以在unbind钩子中清理水印（例如，当指令被移除时）
    // unbind(el) {
    //   // 清理逻辑...
    //   el.style.backgroundImage = ''; // 移除背景图像
    // }
  })
}
